<template>
  <div class="app-container">
    <!-- 产品信息 -->
    <section class="product-message">
      <h2>产品信息</h2>
      <ul>
        <li><span>产品名称：</span><span>{{wish.wish_name}}</span></li>
        <li><span>规格：</span><span>{{wish.product_specs&&wish.product_specs.name}}</span></li>
        <li><span>数量：</span><span>{{wish.number}}</span></li>
        <li><span>单价：</span><span>{{wish.unit_price / 100}}</span></li>
        <li><span>总金额：</span><span>{{wish.wish_price / 100}}</span></li>
        <li><span>参考采购价：</span><span>{{wish.price_purchase / 100}}</span></li>
        <li><span>品牌：</span><span>{{product.brand_name}}</span></li>
        <li><span>品牌所属：</span><span>{{wish.traveler_location&&wish.traveler_location.name}}</span></li>
        <li><span>期望采购国家：</span><span>{{wish.traveler_location&&wish.traveler_location.name}}</span></li>
      </ul>
    </section>
    <!-- 买手行程信息 -->
    <section class="buyer-itinerary-message"
             v-if="isReceive">
      <h2>买手行程信息</h2>
      <ul>
        <li v-for="(item,index) in trip.trip_history"
            :key="index"
            class="itinrtary-class">
          <div><span>出行时间：</span><span>{{trip.departure_time.split(" ")[0]}} 至 {{trip.end_time.split(" ")[0]}}</span></div>
          <div><span>目的地：</span><span>{{trip.traveler_location&&trip.traveler_location.name}}</span></div>
          <div><span>行程图片：</span>
            <ul style="display:inline-block">
              <li v-for="(val,ind) in item.trip_imgs"
                  :key="ind"
                  style="display:inline-block">
                <img :src="formatImage(val)"
                     alt="ind">
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </section>
    <!-- 心愿信息 -->
    <section class="hope-message">
      <h2>心愿信息</h2>
      <ul>
        <li><span>心愿发布时间：</span><span>{{wish.created_at}}</span></li>
        <li><span>发布编号：</span><span>{{wish.id}}</span></li>
        <li><span>心愿状态：</span><span>{{wish.status | statusFilter}}</span></li>
        <li><span>心愿留言：</span><span>
            <el-input type="textarea"
                      :rows="5"
                      v-model="wish.remark"
                      :disabled="true"
                      class="hope-textarea"></el-input>
          </span></li>
      </ul>
    </section>
    <!-- 帮ta带 -->
    <section class="help-take"
             v-if="!isReceive">
      <el-button type="primary"
                 @click="dialogFormVisible = true">帮ta带</el-button>
      <el-dialog :visible.sync="dialogFormVisible">
        <el-form :model="taForm">
          <!-- <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="taForm.name" autocomplete="off"></el-input>
        </el-form-item> -->
          <el-form-item label="选择买手">
            <el-select v-model="taForm.buyer_id"
                       filterable
                       placeholder="请选择买手">
              <el-option v-for="item in buyList"
                         :key="item.customer_id"
                         :label="item.nickname"
                         :value="item.customer_id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出行时间">

            <el-date-picker v-model="depEndTime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="目的地（国家）">
            <el-select v-model="taForm.traveler_location_id"
                       filterable
                       clearable
                       placeholder="选择行程要去的地方">
              <el-option v-for="item in countryList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-upload action="https://assets.tourscool.com/upload.php"
                       list-type="picture-card"
                       name="uploadFile"
                       :on-preview="handlePictureCardPreview"
                       :on-success="successHandle"
                       :on-remove="handleRemove"
                       :on-exceed="handleExceed"
                       :before-upload="beforeAvatarUpload"
                       :limit="3"
                       :headers="{
                                Authorization:'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9hcGkub3N0LmNvbVwvYXBpXC90b3VyXC92MVwvbG9naW4iLCJpYXQiOjE1NDc0NTgzNzIsImV4cCI6MTg2MjgxODM3MiwibmJmIjoxNTQ3NDU4MzcyLCJqdGkiOiIzU2VYYk9vcE5uRjFOelpzIiwic3ViIjo5NTIsInBydiI6IjFkMGEwMjBhY2Y1YzRiNmM0OTc5ODlkZjFhYmYwZmJkNGU4YzhkNjMiLCJ1aWQiOjk1Mn0.dBetexvcYix1wYgOWGtYHumnOrNB3ghHy1Isn4r-8mU'
                              }">
              <el-dialog :visible.sync="dialogVisibleImg">
                <img width="100%"
                     :src="dialogImageUrl"
                     alt="">
              </el-dialog>

              <div slot="trigger"
                   class="uploadImgCon">
                <i class="el-icon-plus uploadImgIcon" />
              </div>
              <div slot="tip">支持jpg\png\jpeg格式 最多3张</div>

            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </section>
    <section class="about-order"
             v-if="isReceive">
      <h3>相关订单</h3>
      <div class="order-class">
        <span>订单编号：</span><span>{{wish.order.id}}</span>
      </div>

    </section>
  </div>
</template>

<script>
import {getDatamap} from '@/api/product'
import {getWishDetail, getBuyList, buyReceiveHope} from '@/api/demand'
export default {
  name: 'DemandAdd',
  data() {
    return {
      // isReceivedisReceived:true,//是否已对接
      dialogFormVisible: false, //是否显示 帮ta带的dialog

      product: {}, //产品
      wish: {}, //心愿
      trip: {}, //旅程
      buyList: [], //买手列表
      countryList: [], //国家列表
      dialogVisible: false, //帮ta带
      dialogVisibleImg: false, //图片预览
      depEndTime: [],
      taForm: {
        wish_id: '',
        buyer_id: '',
        departure_time: '',
        end_time: '',
        traveler_location_id: '',
        imgs: [],
      },
      dialogImageUrl: '',
    }
  },
  props: {
    isReceive: {
      type: Boolean,
      default: false,
    },
  },
  filters: {
    statusFilter(val) {
      if (val == 1) {
        return '已对接'
      } else {
        return '待对接'
      }
    },
  },
  created() {
    this.getWish(this.$route.params.id)
    this.getBuyList()
    this.getCountryList()
  },
  methods: {
    //提交表单
    submitForm() {
      this.dialogFormVisible = false
      console.log(this.taForm)
      this.taForm.wish_id = this.wish.id
      this.taForm.departure_time = this.depEndTime[0]
      this.taForm.end_time = this.depEndTime[1]
      buyReceiveHope(this.taForm).then(res => {
        if (res.code == 0) {
          this.$router.push({path: '/demand/list'})
          this.$notify({
            message: '接单成功成功',
            type: 'success',
            duration: 2000,
          })
        }
      })
    },
    //获取国家列表
    getCountryList() {
      getDatamap().then(res => {
        if (res.code == 0) {
          this.countryList = res.data.locations.list
        }
      })
    },
    //获取买手列表
    getBuyList() {
      getBuyList().then(res => {
        if (res.code == 0) {
          this.buyList = res.data
        }
      })
    },
    //获取心愿详情
    getWish(id) {
      getWishDetail(id).then(res => {
        if (res.code == 0) {
          this.product = res.data.product
          this.wish = res.data.wish
          this.trip = res.data.trip
        }
      })
    },
    //上传图片成功后的狗子
    successHandle(res, file, fileList) {
      console.log(1, res)
      console.log(2, file)
      console.log(3, fileList)
      this.taForm.imgs.push(res.data.relative_url)
      console.log(this.taForm)
    },

    // 上传图片超出限制
    handleExceed() {
      console.log('上传图片超出3个')
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.imageList.forEach((value, index, array) => {
        if (value.name == file.name) {
          this.imageList.splice(index, 1)
        }
      })
      console.log(this.imageList)
    },
    handlePictureCardPreview(file) {
      // this.productForm.images.url = file.url
      this.dialogImageUrl = file.url
      this.dialogVisibleImg = true
      console.log(file)
    },
    beforeAvatarUpload(file, fileList) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isLt1M) {
        this.$message.error('上传行程图片大小不能超过 1MB!')
      }
      return isLt1M
    },
    /* handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }, */
    // tab切换
    handleClick(tab, event) {
      console.log(tab, event)
    },
  },
}
</script>

<style lang="scss" scoped>
h2 {
  padding-left: 30px;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    width: 15px;
    height: 30px;
    background-color: #304156;
  }
}
h3 {
  background-color: #eee;
  padding: 20px 0 20px 30px;
  margin-bottom: 0;
}
ul {
  li {
    margin: 10px 0;
    span {
      margin: 0 10px;
      vertical-align: top;
    }
  }
}
.hope-textarea {
  width: 50%;
  background-color: #304156;
}
.help-take {
  margin-left: 10%;
  margin-top: 50px;
}
img {
  display: block;
  width: 120px;
  height: 120px;
}
.itinrtary-class {
  margin: 30px 0;
}
.order-class {
  border: 1px solid #eee;
  padding: 20px 0 20px 30px;
}
</style>
